<template>
	<view class="all">
		<view class="item" v-for="(item,index) in dataList" :key="index">
			<view class="title">
				{{item.idea_type}}
			</view>
			<view class="content">
				{{item.idea_content}}
			</view>
			<view class="pic">
				<view class="pic_item" v-for="(items,index) in item.idea_img" :key="index">
					<image  style="width: 100%;height: 170rpx;" :src="items" mode=""></image>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" marginTop="30" marginBottom="30" v-if="dataList.length" />
	</view>
</template>

<script>
	import {getFeedbackList} from '@/utils/api.js'
	export default {
		data() {
			return {
				page: 1,
				page_size: 5,
				dataList:[],
				status: 'loadmore',
				totalPage:'',
			}
		},
		onLoad() {
			this.getDateList()
		},
		onShow() {
			
			
		},
		//页面滚动到底部触发事件
		onReachBottom(){
				if(this.page >= this.totalPage){
					this.status = 'nomore'
					return 
				} 
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.getDateList({page:this.page,page_size:this.page_size})
					if(this.page >= this.totalPage) {
						
					}
					else this.status = 'loading';
				}, 2000)
				
		},
		methods:{
			getDateList(){
				let data={page:this.page,page_size:this.page_size}
				getFeedbackList(data).then(res=>{
					if (res.data.meta.status == 200) {
						let total=res.data.data.total
						this.totalPage=Math.ceil(total/this.page_size)
						let datas=res.data.data.data
						datas.forEach((item)=>{
							if(item.idea_img!=''&& typeof(item.idea_img)  === "string"){
								item.idea_img=item.idea_img.split(',')
							}
						})
						this.dataList.push(...datas);//在列表后面新增新获取的数据
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	padding-top: 2rpx;
	height: 100%;
	.item{
		background-color: #ffffff;
		padding: 0 24rpx;
		padding-top: 40rpx;
		margin-bottom: 20rpx;
		.title{
			font-size: 32rpx;	
			font-weight: bold;
			color: #242424;
		}
		.content{
			margin-top: 28rpx;
			font-size: 28rpx;
			color: #686868;
			line-height: 45rpx;
		}
		.pic{
			margin-top: 28rpx;
			width: 100%;
			display: flex;
			flex-wrap:wrap;
			justify-content: flex-start;
			.pic_item{
				margin-right: 3%;
				margin-bottom: 3%;
				width: 30%;
				height: 170rpx;
				border-radius: 8px;
				background-color: aquamarine;
			}
		}
	}
}
</style>
